<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>Binwh</title>
    <meta name="description" content="Copyright Binwh"/>
    <% include header.html %>
    <style type="text/css">
        .bs-header { background: url(/images/congruent_outline.png) repeat 0 0; line-height: 200%; }
        .bs-footer { background: url(/images/congruent_outline.png) repeat 0 0; line-height: 200%; text-align:center; padding-top: 40px}
        p { color:#706f6f; line-height: 200%; }
        .col-md-4 { padding-top: 10px; background: #f7f7f7;}
        .col-md-8 { padding-top: 0px; background: white;};
        .row { background: white; margin-bottom:10px;}
        .blog{ padding-top: 10px; padding-bottom: 20px; 
            background: url("/images/newsLine.gif") center bottom no-repeat; }
        .sent { color:white;}
        .media-heading{background-color: #f7f7f7;}
        #container{ margin-bottom:60px; }
        hr { height:4px; border-bottom:0px solid black; overflow:hidden; } 
    </style>
</head>
<body>
    <% include nav.html %>

    <div class="bs-header" id="content">
        <!-- blockquote begin -->
        <div class="container bs-cont">
            <blockquote class="pull-right">
                <p class="sent">
                    人在孤身逆旅中最易感怀人生，因为说到底，人生在世也无非是孤身逆旅罢了。聚散乃人生寻常事，却也足堪叹息。最可叹的是散时视为寻常，不料而聚无日，一别竟成永诀。或者青春相别，再见时皆已白头，彼此如同一面镜子，瞬间照出了岁月的无情流逝。
                </p>
                <small>
                    周国平
                    <cite>《逆旅与聚散》</cite>
                </small>
            </blockquote>
        </div>
        <!-- blockquote end --> </div>

    <div class="container" id="container">
        <div class="row clearfix">
            <div class="col-md-8 column">
                <% for(var i = 0; i < articles.length; i++) { %>
                <div class="blog">
                    <h2 class="media-heading">
                        <%= articles[i].title %></h2>
                    <div class="media">
                        <% if (articles[i].imageLink) { %>
                        <a href="<%= articles[i].link %>
                            " class="pull-left">
                            <img src="<%= articles[i].imageLink %>" class="media-object" alt='' width='256px' height='158'/></a>
                        <% } %>
                        <div class="media-body">
                            <p>
                                <%= articles[i].content %>
                                <a class="btn" href="<%= articles[i].link %>">去看看 »</a>
                            </p>
                        </div>
                    </div>
                </div>
                <% } %>
            </div>

            <div class="col-md-4 column">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">每日图片</h4>
                        </div>
                        <div class="panel-collapse collapse in">

                            <div class="carousel slide" id="carousel-961301">
                                <ol class="carousel-indicators">
                                    <li data-slide-to="0" data-target="#carousel-961301" class="active"></li>
                                    <li data-slide-to="1" data-target="#carousel-961301"></li>
                                </ol>
                                <div class="carousel-inner">
                                    <% for(var i = 0; i < imgs.length; i++) { %>
                                    <% if (i == 0) { %>
                                    <div class="item active">
                                        <% } else { %>
                                        <div class="item">
                                            <% } %>
                                            <img alt="" src="<%=imgs[i] %>
                                            " />
                                            <div class="carousel-caption"></div>
                                        </div>
                                        <% } %></div>
                                    <a class="left carousel-control" href="#carousel-961301" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left"></span>
                                    </a>
                                    <a class="right carousel-control" href="#carousel-961301" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">收藏</h4>
                        </div>
                        <div class="panel-collapse collapse in">
                            <% if (bookMarks) { 
                                    for(var i = 0; i < 40; i++) { %>
                            <div class="panel-body">
                                <a href="<%= bookMarks[i].url %>
                                    ">
                                    <%= bookMarks[i].title %></a>
                            </div>

                            <%}%>
                            <% } else {%>
                            <div class="panel-body">暂无数据</div>
                            <%}%></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <% include footer.html %></body>
</html>